<template>
  <div class="mainbox">
    <banner></banner>
    <main-content :catname="title">

      <div slot="menu_list">
        <dl>
         <dt :style="{background: '' + this.$util.storage.get('color') + ''}" class="menu_dt"><span>{{title}}</span></dt>

          <dd v-for="(item,index) in new_menu_list" :class="active==index?'menu_dd hover':'menu_dd'"
              @click="ToNewPath(item,index)">{{item.title}}
          </dd>

        </dl>
      </div>

      <div class="inner_content" slot="inner_content">
        <div class="page_con">
          <NoData v-show="isEmpty"></NoData>
          <!--显示内容文章-->
          <div v-if="is_flag==0 && !isEmpty">
            <div class="page_con" v-html="new_rich_content"></div>
          </div>
          <!--显示内容文章-->
          <!--显示文章列表-->
          <div v-else-if="is_flag==1 && !isEmpty" class="right">

            <div v-for="(item,index) in dynamicList" :key="index" @click="toPath(item.id)" class="dynamic_list">
              <p class="title_list" style="color: black;font-size: 30px">{{item.title}}</p>
              <div class="title_desc">{{item.desc | handelRichText(item.desc)}}</div>
              <p class="title_time" style="font-size: 28px;color: #a3afb7;text-align: right">{{item.create_time }}</p>
            </div>


            <!--添加分页-->
            <el-pagination
              :style="{'--activeColor':this.$util.storage.get('color')}"
              background
              layout="prev, pager, next"
              :page-size="6"
              :page-count="8"
              @current-change="pageChange"
              :total="total">
            </el-pagination>
            <!--添加分页-->




          </div>
          <!--显示文章列表-->

        </div>
      </div>

    </main-content>

    <footer-bar></footer-bar>

    <main-menu></main-menu>
  </div>
</template>

<script>
  import Banner from '@/components/bannder/Banner';
  import MainMenu from '@/components/mainmenu/MainMenu';
  import mainContent from '@/components/content/mainContent';
  import footerBar from '@/components/content/footerBar';
  import NoData from '../../components/nodata/NoData'

  export default {
    name: "Pages",
    data() {
      return {
        common_bg:'<p style="text-align: center;"><img src="https://compcity.yuehuio.com/upload/image/20201127/1606476076594613.jpg" title="1606476076594613.jpg" alt="亮点.jpg"/></p>',//当子栏目全部为链接时显示一个通用富文本
        new_menu_list:[],//新列表的菜单数组
        active:0,//当前的激活选项，默认为0
        new_rich_content:'',//新的富文本内容
        is_flag:null,//判断文章的显示状态，0文章页，1列表，
        dynamicList: [],//富文本数据
        title_detail:'',//跳往详情页面的标题
        page:1,//当前第几页，默认显示第一页
        size:6,//每页显示几条记录，默认显示为6条
        total:null,//分页列表总记录条数
        article_param:null,//文章访问时候的参数
        isEmpty:false,//是否显示暂无数据，默认不显示
        menu_bg:'',
        title:''
      }
    },
    components: {
      Banner,
      MainMenu,
      mainContent,
      footerBar,
      NoData,
    },

    created() {
      this.title_detail=this.$route.query.name;
      this.menu_bg=this.$util.storage.get("menu_bg");
      this.title=this.$route.query.name;
      console.log('this.$route.query', this.$route.query);
      this.getColumnContent();
    },

    watch: {
      //监听相同路由下参数变化的时候，从而实现异步刷新
      '$route'(to, from) {
        this.$router.go(0);
      },
    },

    methods: {

      ToNewPath(item,index){
        let that = this;
        that.active=index;
        that.title_detail=item.title;
        console.log('点击获得的item值为：',item);
        that.getPageAndLink(item);
      },

      toPath(id) {
        let that = this;
        console.log('进入详情页面：', id);
        that.$router.push("/detail?id=" + id+"&name="+this.title_detail);
      },//点击进入详情页面

      getColumnContent(){
        let that = this;
        let params = {
          vollege_id:that.$util.vollege_id,
          pid:that.$route.query.pid
        };
        that.$http.get("/api/PcData/getMenuData",params,r=>{
          console.log('获得的栏目数据为：r：',r.data.menu);
          that.new_menu_list=r.data.menu;
          let res = r.data.menu.every(function (v) {
             return v.content_type=="url"
          })
          console.log('res',res);
          res?(that.is_flag=0,that.new_rich_content=that.common_bg):(that.getPageAndLink(r.data.menu[0]));
          //判断第一项是文章还是列表，默认不能在后台设置成链接页面
        });
      },//获取栏目菜单，类型为文章页，列表页，混合页

      getPageAndLink(item){
        let that = this;
        console.log('item.content_type:',item.content_type);
        that.article_param=item.param;
        item.content_type != "url" ? that.isListContent(item):that.$router.push({path:item.url,query:{name:item.title,pid:item.id,article_param:item.param}});
      },//判断是文章还是外链

      isListContent(item){
        let that = this;
        let params = {
          page:that.page,
          limit:that.size,
        }
        that.$http.get("/api/PcData/getData?"+item.param +"&vollege_id="+that.$util.vollege_id,params,r=>{
           console.log('获得的文章信息为：',r.data);
           r.data.length==1?that.is_flag=0:that.is_flag=1;
           r.data.length==1?that.new_rich_content=r.data[0].content:that.dynamicList=r.data;
           r.data.length==0?that.isEmpty=true:that.isEmpty=false;
           that.total=r.data[0].total;
        });

      },//判断是否是列表还是单页面

      pageChange(page){
        console.log('页码发生了改变！当前页码：',page);
        let that = this;
        let params = {
          page:page,
          limit:that.size,
        }
        that.$http.get("/api/PcData/getData?"+that.article_param +"&vollege_id="+that.$util.vollege_id,params,r=>{
          console.log('获得的文章信息为：',r.data);
          r.data.length==1?that.is_flag=0:that.is_flag=1;
          r.data.length==1?that.new_rich_content=r.data[0].content:that.dynamicList=r.data;
          r.data.length==0?that.isEmpty=true:that.isEmpty=false;
        });
      },

    }

  }
</script>

<style scoped>
  .inner_content {
    /*padding: 60px 50px 0 260px;*/
    padding-top: 60px;
    padding-left: 50px;
  }

  .page_con {
    padding: 0px;
    height: 620px;
    width: 1300px;
  }
  .page_con >>> img{
    max-width: 100%;
  }





  .right {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding-left: 10px;
  }


  .dynamic_list {
    margin-bottom: 15px;
    width: 100%;
    height: 130px;
    box-sizing: border-box;
    padding-left: 10px;
    border-bottom: 2px solid #cccccc;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .title_list{

  }
  .title_desc{
    width: 82%;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .title_time{

  }


  .el-pagination{
    height: 100px;
    padding-top: 53px;
    text-align: center;
  }
  .right >>> .el-pager{
    height: 100px;
  }
  .right >>> .el-pager li{
    height: 50px;
    width: 50px;
    line-height: 50px;
    margin-right: 20px;
  }
  .right >>> .el-pager li:first-child{
    height: 50px;
    width: 50px;
    line-height: 50px;
    /*margin-left: 20px;*/
  }
  .right >>> .btn-prev{
    height: 50px;
    width: 50px;
    line-height: 50px;
  }
  .right >>> .btn-next{
    height: 50px;
    width: 50px;
    line-height: 50px;
  }
  .right >>> .el-pagination.is-background .el-pager li:not(.disabled).active{
    /*background: #29be74;*/
    background: var(--activeColor) !important;
  }



</style>
